<template>
	<view class="xufei r14 bgff pb16">
		<view class="flex flexC borb px20 pt20 pb10">
			<image class="avatar r50 bor" :src="item.logo" mode="aspectFill"></image>
			<view class="flex1 ml20">
				<view class="fs16 bold6 ellipsis1">{{item.name}}</view>
				<view class="fs12 mt5">
					<text class="bgf6c px7 r2">{{item.room_name}}</text>
				</view>
				<view class="fs12">
					剩余: <text class="cff0 fs38 bold6">{{item.min}}</text>分钟
				</view>
			</view>
		</view>
		<view class="flex flexC py20 px12">
			<view v-for="(item,index) in 3" :key="index" @click="doSelect(index)"
				class="shadow aliC r2 w33 py12 bor57 boxS mx3 mb6 flex flexCol flexC"
				:class="index == currentIndex ? 'bgf6c' : 'bgff'">
				<view class="flex flexC">
					<image v-if="index == currentIndex" class="w15" src="/static/img/icon/xufei.png" mode="aspectFill">
					</image>
					<image v-else class="w15" src="/static/img/icon/xufei2.png" mode="aspectFill"></image>
					<text class="ml4">续费</text>
				</view>
				<view class="mt4 fs12">{{item+1}}小时</view>
			</view>
		</view>
		<view class="shadow btnbox mx16 flex flexC r40 bgff">
			<view class="py4 flex1 flex flexS pl15">
				<text class="fs12 bold6 c00">已选：</text>
				<view class="flex1">
					<view class="cff0 fs16">{{hour}}小时</view>
					<view class="fs12 c85">{{price}}元</view>
				</view>
			</view>
			<view @click="xuCoupon" class="bgf6c flex1 btn2 bold6 flex flexC flexJC fs16">券码续时</view>
			<view @click="xufeiPay" class="bgf6c flex1 btn bold6 flex flexC flexJC fs16">立即支付</view>
		</view>
		<view class="r50 aliC cff fs20 close" @click="closeYuding">×</view>
	</view>
</template>

<script>
	export default {
		name: "xufei",
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				currentIndex: 0,
				hour: 1,
				price: 0
			};
		},

		mounted() {
			console.info("===xufei====="+JSON.stringify(this.item));
			this.price = this.hour * this.item.hour_price;
			this.price = this.price.toFixed(2);
		},
		
		methods: {
			xuCoupon(){
				console.log('item的值：'+this.item);
				if (
					this.item &&
					Object.prototype.hasOwnProperty.call(this.item, 'type') &&
					this.item.type === "tq"
				) {
					// 满足条件，跳转到目标页面
					uni.navigateTo({
						url: '/pages/home/tqXuMtDou'
					});
				} else {
					console.log('跳转失败：item 无 type 字段或 type 值不为 "tq"');
					uni.navigateTo({
						url:'/pages/home/xuMtDou'
					})
				}
			},
			
			// xuCoupon(){
			// 	uni.navigateTo({
			// 		url:'/pages/home/xuMtDou'
			// 	})
			// },
			
			xufeiPay(){
				this.$emit("xufeiPay",this.item);
			},

			doSelect(index) {
				this.currentIndex = index;
				this.hour = index + 1;

				this.price = this.hour * this.item.hour_price;
				this.price = this.price.toFixed(2);
				this.item.hour = this.hour;
				this.item.price = this.price;
				
			},

			closeYuding() {
				this.$emit("closeYuding")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xufei {
		width: 80vw;
		position: relative;
		margin-top: -100rpx;

		.avatar {
			width: 160rpx;
			height: 160rpx;
		}

		.ellipsis1 {
			max-width: 44vw;
		}

		.w33 {
			width: 31.65%;

			&.bgf6c {
				color: #fff;
			}
		}

		.w15 {
			width: 30rpx;
			height: 30rpx;
		}

		.btnbox {
			height: 94rpx;

			.btn {
				height: 100%;
				border-radius: 0 80rpx 80rpx 0;
			}
			
			.btn2{
				height: 100%;
				border-right: #fff 1px solid;
				
			}
			
			
		
		}

		.close {
			position: absolute;
			bottom: -100rpx;
			left: calc(50% - 30rpx);
			width: 64rpx;
			height: 64rpx;
			background-color: #333;
		}
	}
</style>
